import React from "react";
import Chart from "echarts-for-react";
import style from "./EnvDetailsTu.less";

class EnvDetailsTu extends React.Component {
  
    setOption = () => {
        return {
            tooltip: {
                trigger: 'axis'
            },
           
            grid: {
                left: '5%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                // name: 'shi',
                axisTick: {
                    alignWithLabel: true
                },
                // nameLocation:'bottom',
                splitLine: {show: false},
                data:this.props.tubiaoX?this.props.tubiaoX:[],
            },
            yAxis: {
                type: 'value'
            },
            dataZoom: [{
                type: 'slider',
                xAxisIndex: 0,
                filterMode: 'empty',
                start: 0,
                end: 100
            }, {
                type: 'inside',
                xAxisIndex: 0,
                filterMode: 'empty',
                start: 0,
                end: 100
            }],
            series: [
                {
                data: this.props.tubiaoY?this.props.tubiaoY[0]:[],
                type: 'line',
                smooth: true
                },
                {
                    data: this.props.tubiaoY?this.props.tubiaoY[1]:[],
                    type: 'line',
                    smooth: true
                    }
        ]
        }
    }

    render() {
        console.log(this.props)
        return (



                <div id="main" className={style.main}>
                    <Chart option={this.setOption()} notMerge lazyUpdate />
                </div>

        );
    }
}

export default EnvDetailsTu;
